<template>
  <div class="courseinfo">
    <div class="title">课程信息</div>
    <div class='coursebox'>
      <el-table
      :data="courseList"
      style="width: 100%">
      <el-table-column
        label="课程"
        width="100">
        <template slot-scope="slot">
          <img :src="getImgUrl(slot.row.course)" alt="">
        </template>
      </el-table-column>
      <el-table-column
        prop="coursename"
        label="课程名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="teacher"
        label="授课老师"
        width="100">
      </el-table-column>
      <el-table-column
        prop="price"
        label="课程价格(元)"
        width="120">
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      courseList: [{
        course: 'main-kecheng1.png',
        coursename: '幼儿英语入门课程',
        teacher: '张三',
        price:'2366.00'
      },
      {
        course: 'main-kecheng2.png',
        coursename: '法外狂徒',
        teacher: '张三',
        price:'2366.00'
      }]
    }
  },
  methods: {
    getImgUrl(src){
      return require('@/assets/img/main/' + src)
    }
  },
}
</script>
<style lang="less" scoped>
  .title{
    padding: 24px 0 4px 24px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    &::before{
      content: '';
      display: inline-block;
      background-color:#3c87fe;
      width: 4px;
      height: 21px;
      margin-right: 20px;
      vertical-align:sub;
    }
    &:hover,&:focus{
      color: #438afe;
    }
  }
  .courseinfo{
    width: 600px;
    height: 250px;
    background-color: white;
    
  }
  .coursebox{
    padding: 0 64px;
    box-sizing: border-box;
  }
  /deep/th{
    padding: 5px 0 !important;
    font-weight: bold;
    font-size: 16px;
    color: #333;
  } 
  /deep/tbody{
    .el-table__row{
      td:nth-last-child(1),td:nth-last-child(2){
        text-align: center;
      }
    }
    .el-table__cell{
    padding: 5px 0 !important;
    }
  }
  /deep/.el-table::before{
    height: 0;
  }
  /deep/.el-table th.el-table__cell.is-leaf{
    border: none;
  }
  /deep/.el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf{
    border: none !important;
  }
</style>